<template>
    <div>
        <a-row type="flex">
            <a-col :span="10" class="pr1">
                <a-card title="基本情况">
                    <a-row type="flex">
                        <a-col :span="8">
                            <img style="width:100%;height:auto" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.dongqiudi.com%2Fuploads%2Favatar%2F2016%2F03%2F13%2F7UtAATt4HB_thumb_1457841251601.jpg&refer=http%3A%2F%2Fimg.dongqiudi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626103349&t=13481498bc567fe521aa0373ce2074b9">
                        </a-col>
                        <a-col :span="16" class="pl1">
                            <a-row type="flex">
                                <a-col :span="4">姓名:</a-col>
                                <a-col :span="14">John Brown</a-col>
                            </a-row>
                            <a-row type="flex" class="pt1">
                                <a-col :span="4">年龄:</a-col>
                                <a-col :span="14">34</a-col>
                            </a-row>
                            <a-row type="flex" class="pt1">
                                <a-col :span="4">工作:</a-col>
                                <a-col :span="14">攻城狮</a-col>
                            </a-row>
                            <a-row type="flex" class="pt1">
                                <a-col :span="4">地址:</a-col>
                                <a-col :span="14">广东深圳</a-col>
                            </a-row>
                            <a-row type="flex" class="pt1">
                                <a-col :span="4">公司:</a-col>
                                <a-col :span="20">深圳市伊欧乐科技有限公司</a-col>
                            </a-row>
                            <a-row type="flex" class="pt1">
                                <a-col :span="4">标签:</a-col>
                                <a-col :span="20">
                                    <a-tag>dev</a-tag>
                                    <a-tag>nice</a-tag>
                                    <a-tag>manager</a-tag>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
            <a-col :span="14">
                <a-card title="本周业绩">
                    <div ref="score" style="width:100%;height:183px"></div>
                </a-card>
            </a-col>
        </a-row>
        <a-card title="操作日志" class="mt1">
            <a-table :loading="loading" :columns="columns" :data-source="tableData" :pagination="pagination">
            </a-table>
        </a-card>
    </div>
</template>
<script lang='ts'>
import { defineComponent,ref,reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import * as echarts from 'echarts';
interface DataProps {}

const columns = [
    {title: '标题',align:"center",dataIndex: 'name',key: 'name',},
    {title: '年龄',align:"center",dataIndex: 'age',key: 'age',},
    {title: '地址',align:"center",dataIndex: 'address',key: 'address',},
    {title: '标签',align:"center",key: 'tags',dataIndex: 'tags'},
    {title: '操作',align:"center",key: 'action',slots: { customRender: 'action' }},
];

const tableData:object[] = [];
for (let i = 0; i < 30; i++) {
    tableData.push({key: i,name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],})
}

export default defineComponent({
    name: '',
    setup(props,context) {
        const score=ref()
        const data: DataProps = reactive({
                                    
        })
        onMounted(() => {
            var myChart = echarts.init(score.value);
            // 绘制图表
            myChart.setOption({
                grid:{
                    x:25,
                    y:10,
                    x2:5,
                    y2:20,
                    borderWidth:1
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }]
            })
        })
        const refData = toRefs(data);
        return {
            score,
            ...refData,

            columns,
            tableData,
        }
   }
});
</script>
<style lang='scss' scoped>
</style>